<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>文章详情</title>
  <link rel="stylesheet" th:href="@{/css/menu.css}" >
  <style>

		body{
		    background-color: #f3f2f2; /*背景色*/
		    font-family: 'Microsoft YaHei', Arial, sans-serif; /*字体*/
		}
		h1{
		    text-align: center; /*标题居中*/
		    font-size: 36px; /*标题字号*/
		    color: #363636; /*标题文字颜色*/
		    margin-top: 40px; /*标题与上方内容的距离*/
		}
		hr{
		    height: 1px; /*横向分割线粗细*/
		    background-color: #ccc; /*横向分割线颜色*/
		    border: none; /*去除边框*/
		    margin-top: 20px; /*分割线与上方内容的距离*/
		}
		form{
		    margin: 40px auto; /*表单居中*/
		    width: 500px; /*表单宽度*/
		    background-color: #fff; /*表单背景色*/
		    padding: 30px; /*表单内边距*/
		    border-radius: 8px; /*表单圆角*/
		    box-shadow: 0 0 10px rgba(0,0,0,.1); /*表单阴影*/
		}
		textarea{
		    display: block; /*将输入框设置为块级元素，以便换行*/
		    width: 100%; /*输入框宽度*/
		    margin-bottom: 20px; /*输入框与下方内容的距离*/
		    font-size: 16px; /*输入框字号*/
		    padding: 10px; /*输入框内边距*/
		    border: none; /*去除输入框边框*/
		    border-radius: 8px; /*输入框圆角*/
		    box-shadow: 0 0 5px rgba(0,0,0,.1); /*输入框阴影*/
		    resize: none;/*禁止调整大小*/
		}
		#content{
		    height:40vh;
		}
		button {
		  display: block; /* 将按钮设置为块级元素以占据整行 */
		  background-color: #333;
		  color: #fff;
		  font-size: 15px;
		  text-transform: uppercase;
		  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
		  transition: all 0.3s ease-in-out;
		  cursor: pointer;
		  padding: 14px;
		  border-radius: 20px;
		  border: none;
		  margin: -100px auto; /* 使用 margin 属性将按钮水平居中 */
		  width:100px;
		}

		button:hover{
		  background-color: #fff;
		  color: #333;
		  border: 2px solid #333;
		}

	</style>


</head>
<body>


<div th:replace="~{commons/menu::common-menu}"></div>

<h1>文章详情</h1>
<hr />

<form>
  <textarea th:text="${article.title}" placeholder="这里是文章标题"></textarea><br/>
  <textarea th:text="${article.content}" id="content" placeholder="这里是文章内容"></textarea><br/>
  </form>
<button onclick="goBack()">返回</button>
<script>
        function goBack() {
          window.history.go(-1);
        }
    </script>
</body>
</html>